<template>
  <ContentWrap>
    <el-row :gutter="24">
      <el-col :span="16">
        <div>
          <div class="card">
            <div style="border: 2px solid #333; width: 20%">
              <div class="line">
                <div>大钩负荷(kN)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: red;
                    border-bottom: 1px solid red;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>2500</div>
                </div>
              </div>
              <div class="line">
                <div>钻压(kN)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: blue;
                    border-bottom: 1px solid blue;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>500</div>
                </div>
              </div>
              <div class="line">
                <div>补偿大钩高度(kN)</div>
                <div style="display: flex; justify-content: space-between; padding: 0 3px">
                  <div>0</div>
                  <div>50</div>
                </div>
              </div>
            </div>
            <div class="seLine">
              <div>时间</div>
              <div style="color: red">实测井深(M)</div>
              <div style="color: blue">钻头位置(m)</div>
              <div style="color: green">迟到井深(m)</div>
            </div>
            <div class="thiLine">
              <div class="line">
                <div>转盘转速(rpm)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: #ff1afd;
                    border-bottom: 1px solid #ff1afd;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>2500</div>
                </div>
              </div>
              <div class="line">
                <div>扭矩(kN.m)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: #72d7d2;
                    border-bottom: 1px solid #72d7d2;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>500</div>
                </div>
              </div>
              <div class="line">
                <div>平均钻时(min/m)</div>
                <div style="display: flex; justify-content: space-between; padding: 0 3px">
                  <div>0</div>
                  <div>50</div>
                </div>
              </div>
            </div>
            <div class="thiLine">
              <div class="fouLine">
                <div>套管压力(MPa)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: #abab10;
                    border-bottom: 1px solid #abab10;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>2500</div>
                </div>
              </div>
              <div class="fouLine">
                <div>立管压力(MPa)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: #8c1614;
                    border-bottom: 1px solid #8c1614;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>500</div>
                </div>
              </div>
              <div class="fouLine">
                <div>1#泵冲(SPM)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: green;
                    border-bottom: 1px solid green;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>50</div>
                </div>
              </div>
              <div class="fouLine">
                <div>2#泵冲(SPM)</div>
                <div style="display: flex; justify-content: space-between; padding: 0 3px">
                  <div>0</div>
                  <div>50</div>
                </div>
              </div>
            </div>
            <div class="thiLine">
              <div class="line">
                <div>1#泵冲(SPM)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: #8b008b;
                    border-bottom: 1px solid #8b008b;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>2500</div>
                </div>
              </div>
              <div class="line">
                <div>总池体积(m3)</div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    color: green;
                    border-bottom: 1px solid green;
                    padding: 0 3px;
                  "
                >
                  <div>0</div>
                  <div>500</div>
                </div>
              </div>
              <div class="line">
                <div>活动池体积(m3)</div>
                <div style="display: flex; justify-content: space-between; padding: 0 3px">
                  <div>0</div>
                  <div>50</div>
                </div>
              </div>
            </div>
          </div>
          <div class="echart">
            <div class="list">
              <div id="Echarts"></div>
            </div>
            <div class="lists">
              <div style="text-align:center;margin-top:20px">
                <div>09:20</div>
                <div style="color: red">1971.08</div>
                <div style="color: blue">1284.09</div>
                <div style="color: green">1971.08</div>
              </div>
              <div style="text-align:center;margin-top:20px">
                <div>09:20</div>
                <div style="color: red">1971.08</div>
                <div style="color: blue">1284.09</div>
                <div style="color: green">1971.08</div>
              </div>
            </div>
            <div class="lists">
              <div></div>
            </div>
            <div class="lists">
              <div style="background:#FFFFE1;margin-top:30px;padding:10px;font-size:14px;line-height:18px">
                <div>时间：2024-11-08 09:19:15</div>
                <div>注样信息: 无</div>
                <div>迟到井深(m):1971.08</div>
                <div>钻头位置(m):1284.08</div>
                <div>实测井深(m):1971.08</div>
                <div>转盘转速(rpm):0</div>
                <div>扭矩(kN.m):0</div>
                <div>平均钻时(min/m):0</div>
              </div>
            </div>
            <div class="lists">
              <div></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex; flex-wrap: wrap" class="right">
          <div
            v-for="(item, index) in list"
            :key="index"
            style="
              display: flex;
              width: 50%;
              height: 50px;
              line-height: 50px;
              border-bottom: 1px solid #333;
            "
          >
            <div style="width: 50%; background: #fff; text-align: center">{{ item.name }}</div>
            <div style="width: 50%; background: #ecdeb5; color: blue; text-align: center">{{
              item.value
            }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts' //引入echarts
import { ref, onMounted } from 'vue'

defineOptions({ name: 'BlankIndex' })
const list = ref([
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' },
  { name: '井深', value: '1971.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '钻头位置', value: '1199.0 m' },
  { name: '时间', value: '09:37:37' }
])
onMounted(() => {
  var chartDom = document.getElementById('Echarts')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    tooltip: {
      trigger: 'axis',
      formatter: ' <br/>{b}m : {c}'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      },
      position: 'top'
    },
    yAxis: {
      type: 'category',
      axisLine: { onZero: false },
      axisLabel: {
        formatter: '{value} km'
      },
      boundaryGap: false,
      data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    },
    series: [
      {
        name: '',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.4)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        data: [15, -10, -16.5, -26.5, -12.1, -2.5, -17.7, -5.7, -6.5]
      },
      {
        name: '',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.4)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        data: [5, -10, -6.5, -16.5, -2.1, -12.5, -7.7, -15.7, 6.5]
      }
    ]
  }
  option && myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
/** 初始化 **/
</script>
<style scoped lang="scss">
.card {
  display: flex;
  height: 300px;
  flex: 1;
  font-weight: bold;
  background:#FFFFE1;
}
.line {
  height: 100px;
  text-align: center;
  line-height: 50px;
}
.fouLine {
  height: 75px;
  text-align: center;
  line-height: 37px;
}
.seLine {
  border: 2px solid #333;
  border-left: none;
  padding: 100px 0px;
  text-align: center;
  line-height: 25px;
  width: 20%;
}
.thiLine {
  border: 2px solid #333;
  border-left: none;
  width: 20%;
}
.echart {
  height: 500px;
  width: 100%;
  display: flex;
}
.list {
  width: 20%;
  height: 100%;
  border: 2px solid #333;
  border-top: none;
}
.lists {
  width: 20%;
  height: 100%;
  border: 2px solid #333;
  border-top: none;
  border-left: none;
}
#Echarts {
  height: 100%;
  width: 100%;
}
</style>
